import React, { PureComponent } from 'react';
import PropTypes from 'prop-types';
import { connect } from 'dva';
import {
  Table,
  Icon,
  Divider,
  Form,
  Select,
  DatePicker,
  Input,
  Card,
  Tag,
  Avatar,
  Checkbox,
  Rate,
  Progress,
  Button,
  Dropdown,
  Row,
  Col,
  Modal,
  message,
  Collapse,
  List,
  Radio,
} from 'antd';

import PageHeaderLayout from '../../../layouts/PageHeaderLayout';
import ImageUploader from '../../../components/Falcon/Attachment/ImageUploader';
import ApplyOrderDisplayer from '../../../components/Falcon/ApplyOrderDisplayer';
import nopictures from '../../../assets/nopictures3.svg';
import novideo from '../../../assets/novideo.svg';
import styles from './RepaymentAbilityChecker.less';
import ImageDisplayer from '../Attachment/ImageDisplayer';
import { solo } from '../../../common/solo';

const Panel = Collapse.Panel;
const FormItem = Form.Item;
const RadioGroup = Radio.Group;
const { TextArea } = Input;

const formItemLayout = {
  labelCol: {
    span: 24,
  },
  wrapperCol: {
    span: 24,
  },
};

const formItemLayout1 = {
  labelCol: {
    span: 4,
  },
  wrapperCol: {
    span: 18,
  },
};

@connect(({ risk }) => ({
  risk,
}))
@Form.create()
export default class RepaymentAbilityChecker extends PureComponent {
  handleIncomeVerifySubmit = () => {
    const { dispatch } = this.props;
    const { validateFieldsAndScroll } = this.props.form;
    validateFieldsAndScroll((error, values) => {
      if (!error) {
        dispatch({
          type: 'risk/commitinComeVerify',
          payload: {
            projectId: this.props.projectId,
            ...values,
          },
          callback: () => {
            const { risk: { riskResult } } = this.props;
            if (riskResult.code == 200) {
              message.success('提交成功');
              dispatch({
                type: 'risk/getBusinessDetails',
                payload: {
                  projectId: this.props.projectId,
                },
              });
              // dispatch(routerRedux.push('/risk/reviewList'));
            } else {
              message.error(riskResult.message);
            }
          },
        });
      }
    });
  };

  render() {
    const { risk: { riskBusinessDetails, riskHomeVisitLoading } } = this.props;
    const { incomeVerify } = riskBusinessDetails;
    const { hideDocuments } = this.props;
    const { hideThirdVerify } = this.props;
    const { checkDetailsValue } = this.props;

    const { getFieldDecorator } = this.props.form;
    return (
      <div>
        <Form>
          {/* {JSON.stringify(incomeVerify)} */}
          <Card title="收入核实">
            <Row gutter={16}>
              <Col span={8}>
                <FormItem label="月收入" {...formItemLayout}>
                  {incomeVerify.majorIncome}
                </FormItem>
              </Col>
              <Col span={8}>
                <FormItem label="共还月收入" {...formItemLayout}>
                  {incomeVerify.jointlyIncome}
                </FormItem>
              </Col>

              <Col span={8}>
                <FormItem label="本次贷款月供" {...formItemLayout}>
                  {incomeVerify.payMonth}
                </FormItem>
              </Col>
            </Row>
            <Row gutter={16}>
              <Col span={8}>
                <FormItem label="其他贷款月供" {...formItemLayout}>
                  {incomeVerify.otherPayMonth}
                </FormItem>
              </Col>
              {/* <Col span={8}>
                <FormItem label="其他负债说明" {...formItemLayout}>
                  {incomeVerify.otherDeptNote}
                </FormItem>
              </Col> */}
            </Row>
            <FormItem label="其他负债说明" {...formItemLayout}>
              {getFieldDecorator('otherAssetNote', {
                initialValue: incomeVerify.otherDeptNote,
              })(<TextArea readOnly rows={4} style={{ width: '60%' }} />)}
            </FormItem>
            <Row gutter={16}>
              <Col span={8}>
                <FormItem label="收入还贷比（本次）" {...formItemLayout}>
                  {//(月收入+共还月收入)/本次贷款
                  (
                    (incomeVerify.payMonth &&
                      incomeVerify.majorIncome &&
                      Number(incomeVerify.payMonth) /
                        (Number(incomeVerify.majorIncome) + Number(incomeVerify.jointlyIncome))) *
                    100
                  ).toFixed(2)}%
                </FormItem>
              </Col>
              <Col span={8}>
                <FormItem label="收入还贷比（全部）" {...formItemLayout}>
                  {//月收入+共还月收入)/(本次贷款+其他贷款)
                  (
                    (incomeVerify.payMonth &&
                      incomeVerify.majorIncome &&
                      Number(incomeVerify.payMonth) + Number(incomeVerify.otherPayMonth)) /
                    (Number(incomeVerify.majorIncome) + Number(incomeVerify.jointlyIncome)) *
                    100
                  ).toFixed(2)}%
                </FormItem>
              </Col>
            </Row>

            <FormItem label="其他资产情况" {...formItemLayout}>
              {getFieldDecorator('otherAssetNote', {
                initialValue: incomeVerify.otherAssetNote,
              })(<TextArea readOnly rows={4} style={{ width: '60%' }} />)}
            </FormItem>
            <FormItem label="收入证明" {...formItemLayout}>
              {incomeVerify.incomgImg.length == 0 ? (
                <img src={nopictures} style={{ width: '10%', height: '10%' }} />
              ) : (
                incomeVerify &&
                incomeVerify.incomgImg.map(item => {
                  return (
                    <Col span={3}>
                      <ImageDisplayer src={solo.imgShow + item} />
                    </Col>
                  );
                })
              )}
            </FormItem>
            <FormItem label="银行流水" {...formItemLayout}>
              {incomeVerify.bankStatement.length == 0 ? (
                <img src={nopictures} style={{ width: '10%', height: '10%' }} />
              ) : (
                incomeVerify &&
                incomeVerify.bankStatement.map(item => {
                  return (
                    <Col span={3}>
                      <ImageDisplayer src={solo.imgShow + item} />
                    </Col>
                  );
                })
              )}
            </FormItem>
          </Card>

          <Card style={{ marginTop: '15px' }}>
            <Row>
              <Col span={12}>
                <FormItem label="收入核实" {...formItemLayout1}>
                  {getFieldDecorator('incomeVerify', {
                    initialValue: incomeVerify.incomeVerify,
                  })(
                    <Radio.Group disabled={!checkDetailsValue}>
                      <Radio value={1}>
                        <span style={{ color: 'green' }}>
                          一致<Icon type="check" />
                        </span>
                      </Radio>
                      <Radio value={0}>
                        <span style={{ color: 'red' }}>
                          不同<Icon type="close" />
                        </span>
                      </Radio>
                    </Radio.Group>
                  )}
                </FormItem>
              </Col>
            </Row>
            {checkDetailsValue ? (
              <FormItem wrapperCol={{ span: 21, offset: 3 }} label="">
                <Button
                  type="primary"
                  onClick={this.handleIncomeVerifySubmit}
                  loading={riskHomeVisitLoading}
                >
                  保存
                </Button>
              </FormItem>
            ) : null}
          </Card>
        </Form>
      </div>
    );
  }
}
